import React from "react"
import {Input, Button, message } from "antd"
import {SearchOutlined, CaretDownOutlined, PlusCircleOutlined, BellOutlined, HomeOutlined, DesktopOutlined, ContactsOutlined, PictureOutlined} from "@ant-design/icons"
import {Link} from "react-router-dom"

import "./index.scss"

const {useState} = React

/**
 * Nav组件中的Article小组件
 */
function NavArticle() {
    const [show, setShow] = useState(false)
    // 点击切换状态
    function clickHandler() {
        setShow(!show)
        // console.log("article click")
    }
    return (
        <span className="nav-list">
            <span onClick={clickHandler}>文章<CaretDownOutlined /></span>
            {/* Article列表默认隐藏 */}
            <div className="nav-article-list " style={{display: show?"block":"none"}}>
                <div className="nav-article-list-item">文章</div>
                <div className="nav-article-list-item">用户</div>
                <div className="nav-article-list-item">帮助中心</div>
            </div>
        </span>
    )
}


/**
 * 头部导航部分：（包括两部分）
 *  1. Nav
 *  2. Header
 */
export default class Nav extends React.Component {
    state = {
        // 初始化为undefined，使其既不向上运动，也不向下运动
        down: undefined
    }
    scrollPos = 0

    // 页面滚动回调
    scrollHandler = (e) => {
        let pos = e.srcElement.documentElement.scrollTop
        let down = pos > this.scrollPos
        if (this.state.down !== down) {
            this.setState({down})
        }
        this.scrollPos = pos
    }
    componentDidMount() {
        // 监听页面
        window.addEventListener("scroll",  this.scrollHandler)
    }
    componentWillUnmount() {
        // 卸载是清除监听
        window.removeEventListener("scroll", this.scrollHandler)
    }
    // TODO publish button
    // PlusCircleOutlined组件的点击回调
    publishClickHandler = () => {
        message.warn("【发布功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }
    // TODO bell button
    // BellOutlined组件的点击回调
    bellClickHandler = () => {
        message.warn("【通知功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }
    // TODO login button
    // 登录按钮的点击回调
    loginClickHandler = () => {
        message.warn("【登录功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }
    // TODO register button
    // 注册按钮的点击回调
    registerClickHandler = () => {
        message.warn("【注册功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }


    // TODO list-game-gal button
    // GalGame按钮的点击回调
    gameGalClickHandler = () => {
        message.warn("【GAlGAME功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }
    // TODO list-game-tr button
    // 同人游戏按钮的点击回调
    gameTrClickHandler = () => {
        message.warn("【同人游戏功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }
    // TODO list-cg button
    // CG归档按钮的点击回调
    cgClickHandler = () => {
        message.warn("【CG归档功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }
    // TODO list-pic button
    // 图集资源按钮的点击回调
    picClickHandler = () => {
        message.warn("【图集资源功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }
    // TODO list-msg button
    // 新人必读按钮的点击回调
    msgClickHandler = () => {
        message.warn("【新人必读功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }
    render() {
        return (
            <div className={"nav-header " + (this.state.down ? "nav-down" : this.state.down===false ? "nav-up" : "")}>
                <nav className="s-nav">
                    <div className="s-nav-box">
                        <Input prefix={<SearchOutlined />} suffix={<NavArticle />}/>
                        <PlusCircleOutlined onClick={this.publishClickHandler}/>
                        <BellOutlined onClick={this.bellClickHandler} />
                    </div>
                </nav>
                <header className="s-header">
                    <div className="s-header-box">
                        <div className="s-header-box-left">
                            <h1 className="left-title">Gal领域</h1>
                            <ul className="left-list">
                                <li className="left-home">
                                    <HomeOutlined />
                                    <span className="left-list-li">主页</span>
                                    <Link to="/" />
                                </li>
                                <li className="left-game">
                                    <DesktopOutlined />
                                    <span className="left-list-li">游戏</span>
                                    <span className="left-list-arrow ">
                                        <span className="iconfont icon-arrowon"></span>
                                        <span className="iconfont icon-arrowdown"></span>
                                    </span>
                                    <div className="left-list-li-items">
                                        <div className="left-list-li-item" onClick={this.gameGalClickHandler}>GalGame</div>
                                        <div className="left-list-li-item" onClick={this.gameTrClickHandler}>同人游戏</div>
                                    </div>
                                </li>
                                <li className="left-cg" onClick={this.cgClickHandler}>
                                    <ContactsOutlined />
                                    <span className="left-list-li">CG归档</span>
                                    <span className="left-list-arrow ">
                                        <span className="iconfont icon-arrowon"></span>
                                        <span className="iconfont icon-arrowdown"></span>
                                    </span>
                                </li>
                                <li className="left=pic" onClick={this.picClickHandler}>
                                    <PictureOutlined />
                                    <span className="left-list-li">图集资源</span>
                                    <span className="left-list-arrow ">
                                        <span className="iconfont icon-arrowon"></span>
                                        <span className="iconfont icon-arrowdown"></span>
                                    </span>
                                </li>
                                <li className="left-msg" onClick={this.msgClickHandler}>
                                    <span className="left-list-li">新人必读</span>
                                </li>
                            </ul>
                        </div>
                        <div className="s-header-box-right">
                            <Button className="right-login" onClick={this.loginClickHandler} >登录</Button>
                            <Button className="right-register" onClick={this.registerClickHandler}>快速注册</Button>
                        </div>
                    </div>
                </header>
            </div>
        )
    }
}